<template>
    <page-view :avatar="avatar" :title="false">
        <div slot="headerContent">
            <div class="title">
                <em-icon type="icon-smile-o" class="mr15" />{{ timeFix }}，{{ user.username }}</div>
        </div>
        <a-row class="main" :gutter="10">
            <a-col :lg="17" :md="17" :xs="24">
              <div class="whiteBox">
                <h2>概述</h2>
                <a-row class="txt-c whiteBox-main" :gutter="10">
                    <a-col v-for="(item,i) in cardList" :key="item.id" :xl="6" :lg="6" :md="6" :xs="24" >
                      <a-card bordered>
                          <div style="width: 100%;height: 220px;display:flex;align-items: center;flex-direction:column;justify-content: center;">
                            <div class="iconBox" :style="`background: ${item.iconColor};`">
                                <a-icon theme="outlined" :type="item.icontype" />
                            </div>
                            <h3 class="cardValue">{{item.value}}</h3>
                            <h4 class="mb10" style="font-size: 18px;">{{item.title}}</h4>
                            <p>
                                <a-button type="primary" v-if="routerShow($route,item.permissionName)" @click="cardBtn(i)" ghost>{{item.btnVal}}</a-button>
                                <div v-if="!routerShow($route,item.permissionName)" style="width:88px;height:32px;"></div>
                            </p>
                          </div>
                      </a-card>
                    </a-col>
                </a-row>
              </div>
            </a-col>
            <a-col :lg="7" :md="7" :xs="24">
              <div class="weChatBox whiteBox">
                  <h2 class="overflow-ellipsis">关注微信公众号</h2>
                  <div class="whiteBox-main">
                    <img src="@assets/images/wechat_gzh.jpg" />
                    <h3 class="overflow-ellipsis">
                      <a-icon type="wechat" style="color: #09bb07;" />
                      关注公众号，接收微信报警推送
                    </h3>
                  </div>
              </div>
            </a-col>
        </a-row>
        <a-row class="main" :gutter="10">
            <a-col :lg="17" :md="17" :xs="24">
              <div class="whiteBox">
                <h2>地图</h2>
                <baidu-map class="whiteBox-main" :scroll-wheel-zoom="true" :center="centerVal" @ready="baiduMap">
                  <bm-view id="map" class="map"></bm-view>
                  <bm-marker v-for="item in mapLists" :icon="{url: isIcon(item.is_OnLine), size: {width: 30, height: 30}}"
                    :key="item.id" :position="{lng: item.longitude, lat: item.latitude}">
                    <bm-label :content="item.name" :labelStyle="{color: 'red', fontSize : '12px'}"
                      :offset="{width: 12, height: -10}" />
                  </bm-marker>
                  <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> -->
                </baidu-map>
              </div>
            </a-col>
            <a-col :lg="7" :md="7" :xs="24">
                <div class="weChatBox whiteBox">
                    <h2 class="overflow-ellipsis">手机端（小程序）</h2>
                    <div class="whiteBox-main">
                      <img src="@assets/images/weChat_applet.png" />
                      <h3 class="overflow-ellipsis">
                        <a-icon  type="wechat" style="color: #09bb07;" />
                        扫描二维码直接进入小程序
                        <!-- (微信6.5.7版本以上) -->
                      </h3>
                    </div>
                </div>
                <div class="weChatBox whiteBox" style="margin-bottom: 0;padding-bottom: 10px;">
                    <h2>登录信息</h2>
                    <ul class="whiteBox-main">
                      <li>
                        <img src="@assets/images/coclok.png" style="width:30px;height:30px" />
                        <div>
                          <p>上次登陆时间</p>
                          <p>{{loginMsg.loginTime}}</p>
                        </div>
                      </li>
                      <li>
                        <img src="@assets/images/trend.png" style="width:30px;height:30px" />
                        <div>
                          <p>登录次数</p>
                          <p>{{loginMsg.loginNum}}次</p>
                        </div>
                      </li>
                    </ul>
                </div>
            </a-col>
        </a-row>
    </page-view>
</template>

<script>
import Vue from 'vue';
import {
  USER,
} from '@/store/mutation-types';
import {
  timeFix,
} from '@/utils/util';
import {
  mapGetters,
  mapState,
  mapActions,
} from 'vuex';
import {
  PageView,
} from '@/layouts';

export default {
  name: 'Workplace',
  components: {
    PageView,
  },
  data() {
    return {
      isbool: true,
      // 地图
      centerVal: '中国',
      BMap: '',
      map: '',
      timeFix: timeFix(),
      avatar: '',
      user: {},
      cardList: [{
        icontype: 'appstore',
        iconColor: '#01e0ee',
        title: '设备总数',
        value: 0,
        btnVal: '设备列表',
        permissionName: 'equipment_list'
      },
      {
        icontype: 'qrcode',
        iconColor: '#66f817',
        title: '数据点数',
        value: 0,
        btnVal: '历史数据',
        permissionName: 'data_historyForm'
      },
      {
        icontype: 'warning',
        iconColor: '#ff8f87',
        title: '报警总数',
        value: 0,
        btnVal: '报警记录',
        permissionName: 'alarmRecord_list'
      },
      {
        icontype: 'team',
        iconColor: '#b87eec',
        title: '用户总数       ',
        value: 0,
        btnVal: '用户列表',
        permissionName: 'passport_list'
      },
      ],
    };
  },
  computed: {
    userInfo() {
      return Vue.ls.get(USER);
    },
    ...mapState({
      // dataLists: state => state.screen.dataLists,
      indexPageData: state => state.Passport.indexPageData,
      mapLists: state => state.controlCenter.homeMapLists,
      loginMsg: state => state.Passport.loginMsg,
    }),
  },
  created() {
    this.user = this.userInfo;
  },
  activated(){
    this.indexPage();
    this.getloginMsg();
    this.changeData();
  },
  watch: {
    mapLists(newData) {
      this.dataChange();
    },
    indexPageData(newData, oldData) {
      this.cardList = [{
        icontype: 'appstore',
        iconColor: '#01e0ee',
        title: '设备总数',
        value: newData.equipment_num ? newData.equipment_num : 0,
        btnVal: '设备列表',
        permissionName: 'equipment_list'
      },
      {
        icontype: 'qrcode',
        iconColor: '#66f817',
        title: '数据点数',
        value: newData.register_num ? newData.register_num : 0,
        btnVal: '历史数据',
        permissionName: 'data_historyForm'
      },
      {
        icontype: 'warning',
        iconColor: '#ff8f87',
        title: '报警总数',
        value: newData.alarm_num ? newData.alarm_num : 0,
        btnVal: '报警记录',
        permissionName: 'alarmRecord_list'
      },
      {
        icontype: 'team',
        iconColor: '#b87eec',
        title: '用户总数',
        value: newData.user_num ? newData.user_num : 0,
        btnVal: '用户列表',
        permissionName: 'passport_list'
      },
      ];
    },
  },
  mounted() {
    // this.indexPage();
    // this.getloginMsg();
    // this.changeData();
    console.log('握草',this.mapLists);
  },
  methods: {
    /* 百度地图 */
    isIcon(val) {
      if (val == 1) {
        return require('@images/position_green.png');
      }
      return require('@images/position_red.png');
    },
    // 获取数据
    changeData() {
      this.getLists();
    },

    // 地图初始化渲染
    dataChange(){
      let BMap = this.BMap;
      let map = this.map;
      let points = [];
      if (this.mapLists.length) {
        this.mapLists.map(item => {
          if (item.longitude != null && item.latitude != null) {
            let point = {
              lat: item.latitude,
              lng: item.longitude
            }; //创建地理坐标点
            points.push(point);
          }
        });
        // 根据标注点位置设置缩放比例
        var view = map.getViewport(eval(points));
        var mapZoom = view.zoom; 
        var centerPoint = view.center; 
        map.centerAndZoom(centerPoint, mapZoom);
      }
    },
    // 百度地图回调
    baiduMap({BMap,map,}) {
      this.BMap = BMap;
      this.map = map;
    },
    ...mapActions({
      indexPage: 'Passport/indexPage',
      getLists: 'controlCenter/HomeMapLists', // 设备列表
      getloginMsg: 'Passport/getloginMsg', // 登陆信息
    }),
    ...mapGetters(['nickname', 'welcome']),
    cardBtn(i) {
      if (i == 0) {
        this.$router.push('/equipment/List');
      } else if (i == 1) {
        this.$router.push('/data_center/history_report');
      } else if (i == 2) {
        this.$router.push('/alert/Record');
      } else if (i == 3) {
        this.$router.push('/user/List');
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
#map {
    width: 100%;
    height: 500px;
    // max-height: 800px;
}

>>> .content{
  margin: 20px;
  padding: 0px ;
  background: transparent;
}
.whiteBox {
  background #fff;
  margin-bottom 10px;

  .whiteBox-main {
    padding: 10px;
  }
}

.iconBox {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 22%;
    font-size: 36px;
    color: #fff;
}

.cardValue {
    font-size: 24px;
}

.main {
  h2 {
      font-size: 24px;
      line-height 50px;
      font-weight: bold;
      border-bottom: 1px solid #eee;
      text-align: left;
      text-indent: 20px;
  }

  .weChatBox{
    display:flex;
    width:100%;
    flex-direction: column;
    text-align: center;

    .whiteBox-main > img {
      height: 230px;
      display: block;
      margin: 10px auto;
    }

    h3 {
      font-size: 14px;
    }

    ul {
      margin: 10px auto;
      li {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        img {
          display: block;
          margin-right: 10px;
        }
        div{
          text-align: left;
        }
      }
    }
  }
}
</style>
